//引入normalize
@import "normalize.scss";
//引入base
@import "base.scss";
body{
  height: 100%;
  background:url('../images/zhujiemian/组50_22.png');
  // background-size: 100%;
  // background-size:cover;
  background-size:(1080/54)*1rem 43.555556rem;
}
a{
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  position: relative;
  .top {
    width: (976/54)*1rem;
    height: (409/54)*1rem;
    background: url("../images/rank_game/组52.png") no-repeat center / 100% 100%;
    margin: 0 auto;
    position: relative;
    .head {
      width: (180/54)*1rem;
      height: (180/54)*1rem;
      //#00C490
      background-color: skyblue;
      position: absolute;
      top: (58/54)*1rem;
      left: 50%;
      margin-left: (-180/54/2)*1rem;
      border: (5/54)*1rem solid white;
      border-radius: 50%;
    }
    .progress {
      width: (287/54)*1rem;
      height: (26/54)*1rem;
      //#00C490
      background-color: #00C490;
      position: absolute;
      top: (303/54)*1rem;
      left: (180/54)*1rem;
      border: (2/54)*1rem solid #DCDCDC;
      border-radius: (26/54)*1rem;
    }
    .level {
      font-size: (34/54)*1rem;
      font-weight: bold;
      color: white;
      top: (295/54)*1rem;
      left: (89/54)*1rem;
      position: absolute;
    }
    .marroon {
      width: (101/54)*1rem;
      height: (292/54)*1rem;
      position: absolute;
      top: 0;
      right: (21/54)*1rem;
      background: url("../images/zhujiemian/组23.png") no-repeat center / 100% 100%;
    }
    .money {
      width: (68/54)*1rem;
      height: (41/54)*1rem;
      position: absolute;
      top: (289/54)*1rem;
      left: (524/54)*1rem;
      background: url("../images/zhujiemian/组36拷贝3.png") no-repeat center / 100% 100%;
    }
    .money_num {
      font-size: (34/54)*1rem;
      font-weight: bold;
      color: white;
      top: (293/54)*1rem;
      left: (610/54)*1rem;
      position: absolute;
    }
  }
  .grade{
    height: (1299/54)*1rem;
    //border: 1px solid red;
    width: (942/54)*1rem;
    //margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    top:(362/54)*1rem;
    left: 50%;
    transform: translateX(-50%);
    .grade1{
      width: 100%;
      height: (257/54)*1rem;
      background: url("../images/rank_game/组51_52.png") no-repeat center / 100% 100%;
      color: #514666;
      margin-bottom: (21/54)*1rem;
      position: relative;
      .grade_name{
        font-size: (43/54)*1rem;
        font-weight: bold;
        top: (75/54)*1rem;
        left: (68/54)*1rem;
        position: absolute;
      }
      .money {
        width: (68/54)*1rem;
        height: (41/54)*1rem;
        position: absolute;
        top: (153/54)*1rem;
        left: (84/54)*1rem;
        background: url("../images/rank_game/money.png") no-repeat center / 100% 100%;
      }
      .money_num {
        font-size: (34/54)*1rem;
        font-weight: bold;
        top: (155/54)*1rem;
        left: (180/54)*1rem;
        position: absolute;
      }
      .star{
        width: (51/54)*1rem;
        height: (47/54)*1rem;
        position: absolute;
        top: (187/54)*1rem;
        right: (31/54)*1rem;
        background: url("../images/rank_game/形状2.png") no-repeat center / 100% 100%;
      }
      .s1{
        right: (92/54)*1rem;
      }
      .s2{
        right: (149/54)*1rem;
      }
    }
    .g4{
      .locked_bg{
        width: 100%;
        height: 100%;
        background:rgba(00,00,00,0.5);
        border-radius: (20/54)*1rem;
        .locked{
          width: (118/54)*1rem;
          height: (152/54)*1rem;
          background: url("../images/rank_game/形状3.png") no-repeat center / 100% 100%;
          position: absolute;
          left: 50%;
          transform: translate(-50%,-50%);
          top: 50%;
        }
      }
    }
    .dot{
      width: 100%;
      height: (220/54)*1rem;
      .img1{
        width: (44/54)*1rem;
        height: (168/54)*1rem;
        background: url("../images/rank_game/椭圆5.png") no-repeat center / 100% 100%;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
      }
    }
    .query{
      width: 100%;
      height: (150/54)*1rem;
      .img2{
        width: (79/54)*1rem;
        height: (124/54)*1rem;
        background: url("../images/rank_game/-.png") no-repeat center / 100% 100%;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
      }
    }

  }
}